<template>
    <!-- 对话框表单 -->
    <!-- 建议使用 Prettier 格式化代码 -->
    <!-- el-form 内可以混用 el-form-item、FormItem、ba-input 等输入组件 -->
    <el-drawer
        class="ba-operate-dialog"
        :model-value="['Info'].includes(baTable.form.operate!)"
        size="70%"
        show-close
        :withHeader="false"
        @close="close"
    >
        <el-form ref="form" label-width="180px">
            <div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'" style="margin-bottom: 20px">
                <h4 style="margin-bottom: 10px;">用户信息</h4>
                <el-descriptions :column="2" border>

                    <el-descriptions-item label="用户ID">
                        {{ baTable.form.extend!.info.member.id }}
                    </el-descriptions-item>
                    <el-descriptions-item label="用户昵称">
                        {{ baTable.form.extend!.info.member.nickname }}
                    </el-descriptions-item>

                    <el-descriptions-item label="手机号">
                         <span style="color: #c45656;font-weight: bold">
                            {{ baTable.form.extend!.info.member.phone }}
                        </span>
                    </el-descriptions-item>

                    <el-descriptions-item label="真实姓名">
                         <span style="color: #c45656;font-weight: bold">
                            {{ baTable.form.extend!.info.member.username }}
                         </span>
                    </el-descriptions-item>

                    <el-descriptions-item label="身份证号">
                         <span style="color: #c45656;font-weight: bold">
                            {{ baTable.form.extend!.info.member.id_number }}
                         </span>
                    </el-descriptions-item>

                </el-descriptions>
            </div>


            <div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'" style="margin-bottom: 20px">
                <h4 style="margin-bottom: 10px;">预约信息</h4>
                <el-descriptions :column="2" border>
                    <!--                    <el-descriptions-item label="景点ID">-->
                    <!--                        {{ baTable.form.extend!.info.scenic.id }}-->
                    <!--                    </el-descriptions-item>-->
                    <el-descriptions-item label="景点名称">
                         <span style="color: #c45656;font-weight: bold">
                           {{ baTable.form.extend!.info.scenic.name }}
                         </span>
                    </el-descriptions-item>

                    <el-descriptions-item label="预约日期">
                         <span style="color: #c45656;font-weight: bold">
                            {{ baTable.form.extend!.info.order_time }}
                         </span>
                    </el-descriptions-item>

                    <el-descriptions-item label="状态">
                        <el-tag type="danger" v-if="baTable.form.extend!.info.status == 0">未支付</el-tag>
                        <el-tag type="warning" v-if="baTable.form.extend!.info.status == 1">待审核</el-tag>
                        <el-tag type="warning" v-if="baTable.form.extend!.info.status == 2">已通过</el-tag>
                        <el-tag type="primary" v-if="baTable.form.extend!.info.status == 3">已出票</el-tag>
                        <el-tag type="success" v-if="baTable.form.extend!.info.status == 4">已完成</el-tag>
                        <el-tag type="danger" v-if="baTable.form.extend!.info.status == 5">爽约</el-tag>
                        <el-tag type="danger" v-if="baTable.form.extend!.info.status == 6">取消</el-tag>
                        <el-tag type="danger" v-if="baTable.form.extend!.info.status == 7">拒绝通过</el-tag>
                    </el-descriptions-item>

                    <el-descriptions-item label="创建时间">
                        {{ baTable.form.extend!.info.create_time }}
                    </el-descriptions-item>

                </el-descriptions>
            </div>




            <div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'" style="margin-bottom: 20px"
                 v-if="baTable.form.extend!.info.status !== 0 && baTable.form.extend!.info.price > 0">
                <h4 style="margin-bottom: 10px;">支付信息</h4>
                <el-descriptions :column="2" border>
                    <el-descriptions-item label="支付金额">
                        {{ baTable.form.extend!.info.price }}
                    </el-descriptions-item>
                    <el-descriptions-item label="支付时间">
                        {{ baTable.form.extend!.info.pay_time }}
                    </el-descriptions-item>
                </el-descriptions>
            </div>
            <div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'"
                 v-if="baTable.form.extend!.info.status !== 0 || baTable.form.extend!.info.status !== 6">
                <h4 style="margin-bottom: 10px;">审核信息</h4>
                <FormItem :label="t('类型')" type="radio" v-model="baTable.form.extend!.info.is_qrcode"
                          prop="status"
                          :input-attr="{ content: {
                              '1':'二维码',
                              '2':'链接',

                          } }"
                          :placeholder="t('Please select field', { field: t('scenic.order.status') })"/>


                <FormItem :label="t('链接')" type="string" v-if="baTable.form.extend!.info.is_qrcode == 2" v-model="baTable.form.extend!.info.url" prop="" :placeholder="t('请输入链接')" />

                <FormItem label="二维码" type="image" v-if="baTable.form.extend!.info.is_qrcode == 1" v-model="baTable.form.extend!.info.qrcode"/>
                <FormItem :label="t('scenic.order.status')" type="radio" v-model="baTable.form.extend!.info.status"
                          prop="status"
                          :input-attr="{ content: {
                              '1':'待审核',
                              '2':'已通过',
                              '3':'已出票',
                              '4':'已完成',
                              '5':'已爽约',
                               '6':'已取消',
                              '7':'拒绝通过',
                          } }"
                          :placeholder="t('Please select field', { field: t('scenic.order.status') })"/>


                <FormItem label="原因" v-if="baTable.form.extend!.info.status == 7" type="string" v-model="baTable.form.extend!.info.reason"
                          placeholder="原因"/>

                <FormItem label="注意事项" v-if="baTable.form.extend!.info.status == 3 || baTable.form.extend!.info.status == 4" type="textarea" v-model="baTable.form.extend!.info.notes"
                          :input-attr="{ showWordLimit: false, rows: 6 }"/>

                <FormItem label="注意事项(定点显示)" v-if="baTable.form.extend!.info.status == 3 || baTable.form.extend!.info.status == 4" type="textarea" v-model="baTable.form.extend!.info.desc"
                          :input-attr="{ showWordLimit: false, rows: 6}"/>


                <el-button v-blur @click="onSubmit()" type="primary">
                    提交
                </el-button>
            </div>


        </el-form>


    </el-drawer>
</template>

<script setup lang="ts">
import type {FormInstance, FormItemRule} from 'element-plus'
import {inject, reactive, ref} from 'vue'
import {useI18n} from 'vue-i18n'
import FormItem from '/@/components/formItem/index.vue'
import {useConfig} from '/@/stores/config'
import type baTableClass from '/@/utils/baTable'
import {buildValidatorData} from '/@/utils/validate'
import createAxios from "/@/utils/axios";
import {ElMessage} from 'element-plus'; // 导入 Element UI 的 Message 组件

const config = useConfig()
const formRef = ref<FormInstance>()
const baTable = inject('baTable') as baTableClass

const {t} = useI18n()

const rules: Partial<Record<string, FormItemRule[]>> = reactive({
    order_time: [buildValidatorData({name: 'date', title: t('scenic.order.order_time')})],
    create_time: [buildValidatorData({name: 'date', title: t('scenic.order.create_time')})],
    update_time: [buildValidatorData({name: 'date', title: t('scenic.order.update_time')})],
})


const onSubmit = () => {
    checkScenic().then(() => {
        baTable.form.operate = null
        baTable.onTableHeaderAction('refresh', {})
    })
}

const close = () => {
    baTable.form.operate! = null
}

const checkScenic = () => {
    // if(baTable.form.extend!.info.is_qrcode == 1 && !baTable.form.extend!.info.qrcode){
    //     ElMessage.error('请上传二维码');
    //     return false;
    // }
    //
    // if(baTable.form.extend!.info.is_qrcode == 2 && !baTable.form.extend!.info.url){
    //     ElMessage.error('请输入链接');
    //     return false;
    // }

    return createAxios(
        {
            url: '/admin/scenic.order/edit',
            method: 'post',
            data: {
                id: baTable.form.extend!.info.id,
                status: baTable.form.extend!.info.status,
                qrcode: baTable.form.extend!.info.qrcode,
                notes: baTable.form.extend!.info.notes,
                reason: baTable.form.extend!.info.reason,
                desc: baTable.form.extend!.info.desc,
                is_qrcode:baTable.form.extend!.info.is_qrcode,
                url:baTable.form.extend!.info.url,
            }
        },
        {
            showSuccessMessage: true,
            loading: true,
            showCodeMessage: true,
            showErrorMessage: true,
        }
    )
};

</script>

<style scoped lang="scss">
.title {
    font-size: 18px;
    font-weight: 600;
    width: 180px;
    text-align: left;
    line-height: 24px;
    padding: 20px 40px;
}
</style>
